<template>
	<!-- 20221227 -->
	<view class="user-config-index-page">

		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 个人信息 -->
			<view class="group">
				<view class="line" style="height: 120rpx; line-height: 120rpx;"
					@click="next('/pages/user/config/info')">
					<view class="text-30 text-1a">个人信息</view>
					<view class="flex align-center">
						<image class="head_img jc-avatar-80" mode="aspectFill"
							:src="userInfo.head_img ? userInfo.head_img : defaultHeadImg"></image>
						<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>

				<view class="line" @click="next('/pages/user/address/list')">
					<view class="text-30 text-1a">我的收货地址</view>
					<view class="flex align-center">
						<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>
			</view>

			<!-- 账户 -->
			<view class="group margin-top-20">
				<view class="line" @click="next('/pages/user/config/account')">
					<view class="text-30 text-1a">账户与安全</view>
					<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
				</view>

				<view class="line" @click="clearStorage">
					<view class="text-30 text-1a">清除缓存</view>
					<view class="flex align-center">
						<view class="text-28 text-b3">{{storageSize}}</view>
						<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>
			</view>

			<!-- 其他 -->
			<view class="group margin-top-20">
				<view class="line" @click="go('/pages/user/config/rule')">
					<view class="text-30 text-1a">隐私</view>
					<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="group margin-top-20">
				<view class='line-height-footer text-center text-32' @click="logout" v-if="showLogoutBtn">退出登录</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 注册浮层 -->
			<ty-register-login :show.sync="show" :agree.sync="agree"></ty-register-login>
		</view>
	</view>
</template>

<script>
	import user from "../api/user.js"
	export default {
		data() {
			return {
				// 是否显示退出登录按钮
				showLogoutBtn: false,
				// 个人信息
				userInfo: {},
				// 默认头像
				defaultHeadImg: '/static/user/headimg_no.png',
				// 缓存占用空间
				storageSize: '',
				// 是否显示注册浮层
				show: false,
				// 默认是否同意协议
				agree: false
			}
		},

		onReady() {
			// 计算缓存占用空间
			let info = uni.getStorageInfoSync()
			if (info.currentSize >= 1024) {
				this.storageSize = parseFloat(info.currentSize / 1024).toFixed(2) + "M"
			} else {
				this.storageSize = info.currentSize.toFixed(2) + "kb"
			}
		},

		onShow() {
			// 是否显示退出登录按钮
			let user_id = uni.getStorageSync('user_id')
			let user_agent = this.cn.userAgent()

			if ((user_agent == 'app' || user_agent == 'h5') && this.cn.isLogin()) {
				this.showLogoutBtn = true
			} else {
				this.showLogoutBtn = false
			}

			if (this.cn.isLogin()) {
				// 获取个人信息
				user.getUserInfo().then(res => {
					if (res.code == 0) {
						this.userInfo = res.data.info
					}
				})
			}
		},

		methods: {
			/**
			 * 清除缓存
			 * @date 2022-12-27
			 */
			clearStorage() {
				this.cn.confirm("确定清除缓存吗").then(res => {
					if (res.confirm) {
						uni.clearStorageSync()
						this.cn.toast('清除成功')
						uni.redirectTo({
							url: '/pages/user/config/index'
						})
					}
				})
			},

			/**
			 * 退出登录
			 * @date 2022-12-27
			 */
			logout() {
				this.cn.confirm("确定退出登录吗").then(res => {
					if (res.confirm) {
						user.logout().then(res => {
							if (res.code == 0) {
								// 清除缓存
								uni.removeStorageSync('user_id')
								uni.removeStorageSync('third_type')
								uni.removeStorageSync('third_type_id')
								// 存入token
								uni.setStorageSync('access_token', res.data.access_token)
								uni.setStorageSync('access_token_expire_time', res.data
									.access_token_expire_time)

								// 返回上一页
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			},

			//判断且跳转页面
			next(url) {
				if (this.cn.isLogin()) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.show = true
				}
			},
		}
	}
</script>

<style>
	.group {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.line {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
